<!DOCTYPE html>
<!-- <!doctype html> -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="${company.description }">
<meta name="keywords" content="${company.keywords }">

<title>AdminLTE 2 | Data Tables</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.4 -->
<link
	href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome Icons -->
<link href="../../plugins/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="../../plugins/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link href="../../plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="../../bootstrap/js/ie/html5shiv.min.js"></script>
        <script src="../../bootstrap/js/ie/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
.content-wrapper{margin-left: 0px;}
</style>


</head>
<body class="skin-blue sidebar-mini">
	<div class="wrapper">

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
		  <!-- Content Header (Page header) -->
		  <section class="content-header">
		    <h1>
		    	 demo演示
		      <small>数据绑定</small>
		    </h1>
		    <ol class="breadcrumb">
		      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		      <li><a href="#">演示</a></li>
		      <li class="active">数据绑定</li>
		    </ol>
		  </section>
		
		  <!-- Main content -->
		  <section class="content">
		    <div class="row">

				<div class="col-sm-6">

					<h1 style="color: rgba(0, 0, 0, .5);text-align: center;">
						way.js
					</h1>

					<div class="alert bg-warning">
						way.js is a simple, lightweight, persistent, framework-agnostic javascript library that allows you to bind DOM elements to an in-memory datastore (with no to little JS code).<br/>
						If you like buzzwords, that means super easy two-way databinding.<br/>
						Once you tried it here, check the
						<a href="https://github.com/gwendall/way.js" target="_blank">documentation</a>
						or play with some code on
						<a href="http://codepen.io/anon/pen/rihBs" target="_blank">Codepen</a> /
						<a href="http://jsfiddle.net/gwendall/s5zzc84m/" target="_blank">jsFiddle</a>.
					</div>

					<div class="out-box">

						<h3 style="margin: 0px;margin-bottom: 20px;">Example</h3>

						<div class="alert bg-success">
							This form is bound to the "formData" property and automatically parsed on each change.<br/>
							Data is set to persistent. Try refreshing the page after changing some of its values.<br/>
							Bonus: open the JS console to see watchers in action.
						</div>

						<form role="form" class="form-horizontal" way-data="formData" way-persistent ><!-- way-persistent 持久化，类似cookie -->

							<div class="form-group">
								<label class="col-sm-3">Name</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" name="name" placeholder="Name" autocomplete="off">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Picture</label>
									<div class="col-sm-9">
									<input type="text" class="form-control" name="picture" placeholder="Enter an image's URL to see magic"
									autocomplete="off">
											<img class="img-responsive" way-data="formData.picture"
									way-default="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-default-profile-photo.jpg">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Nationality</label>
								<div class="col-sm-9 checkbox">
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="french">French
									</label>
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="american">American
									</label>
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="british">British
									</label>
									<label class="col-sm-12">
										<input type="checkbox" name="nationality[]" value="chinese">Chinese
									</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Gender</label>
								<div class="col-sm-9">
									<select class="form-control" name="gender">
										<option>Female</option>
										<option>Male</option>
										<option>Other</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3">Skills</label>
								<div class="col-sm-9">
									<a href="#" way-action-push="formData.skills" style="position: relative;
									top: 5px;
									left: 12px;">Add a skill</a>
								</div>
							</div>
							<div class="form-group" way-repeat="formData.skills" style="padding: 0px;">
								<label class="col-sm-3"></label>
								<div class="col-sm-9">
									<div class="item-entry">
										<input type="text" class="form-control" placeholder="Skill title"
										way-data="title" way-persistent>
										<div>
											<span style="margin-left: 10px;font-weight: bold;">Level</span>
											<label>
												<input type="radio" way-data="level" way-persistent value="noob">Noob
											</label>
											<label>
												<input type="radio" way-data="level" way-persistent value="intermediate">Intermediate
											</label>
											<label>
												<input type="radio" way-data="level" way-persistent value="advanced">Advanced
											</label>
											<label>
												<input type="radio" way-data="level" way-persistent value="god">God
											</label>
										</div>
										<div way-scope-break="true" style="padding: 8px 0px 0px 8px;
border-top: rgba(0, 0, 0, .1) solid thin;
margin-top: 8px;">
											Name (in case you forgot): <span way-data="formData.name"></span>
										</div>
									</div>
									<a href="#" way-action-remove="formData.skills.$$key" way-persistent>Remove</a>
								</div>
							</div>
						</form>

						<div class="alert bg-success">

							The only code required to achieve that (wording excluded) is the following:
							<br/><br/>

							<code class="html" style="font-size: 12px;">
								&lt;form way-data="formData" way-persistent&gt;
									<br/>
									<span class="indent-1">
										&lt;input type="text" name="name"&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;input type="text" name="picture"&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;img way-data="formData.picture" way-default="[some url]"&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;input type="checkbox" name="nationality[]" value="french"&gt; [...]
									</span>
									<br/>
									<span class="indent-1">
										&lt;a way-action-push="formData.skills"&gt;Add a skill&lt;/a&gt;
									</span>
									<br/>
									<span class="indent-1">
										&lt;div way-repeat="formData.skills"&gt;
									</span>
									<br/>
									<span class="indent-2">
										&lt;input type="text" way-data="title" way-persistent&gt;
									</span>
									<br/>
									<span class="indent-2">
										&lt;input type="radio" value="noob" way-data="level" way-persistent&gt; [...]
									</span>
									<br/>
									<span class="indent-1">
										&lt;/div&gt;
									</span>
									<br/>
								&lt;/form&gt;
							</code>

						</div>

					</div>

				</div>

				<div class="col-sm-6 col-fixed">

					<div class="alert bg-warning">
					<input type="text" onclick="WdatePicker();"></input>
						This is the data stored in way.js
						<div class="btn btn-sm btn-default pull-right" style="position:relative;top:-5px;" way-clear way-persistent>
							Clear data
						</div>
					</div>

					<pre way-data="__all__" way-json="true" way-default="{}"></pre>

				</div>

			</div>
		  </section><!-- /.content -->
		</div><!-- /.content-wrapper -->
		
	</div>
	
	<!-- jQuery 2.1.4 -->
	<script src="../../plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
	<!-- Bootstrap 3.3.2 JS -->
	<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- SlimScroll -->
	<script src="../../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
	<!-- FastClick -->
	<script src="../../plugins/fastclick/fastclick.min.js" type="text/javascript"></script>
	<!-- hash listener plugins -->
	<script type="text/javascript" src="../../plugins/hashchange/jquery-migrate.min.js" ></script>
	<!-- hash listener plugins FOR IE < 8 -->
	<script type="text/javascript" src="../../plugins/hashchange/jquery.ba-hashchange.js" ></script>
	<script src="../../dist/js/paper-core.js" type="text/javascript" ></script>
	
	<!-- 数据绑定 -->
	<script src="../../plugins/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	
	<!-- 数据绑定 -->
	<script src="../../plugins/bind-ways/way.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		way.w.ready(function() {
			way.watchAll(function(selector, value) {
				console.log("Something changed.", {
					selector: selector,
					value: value
				});
			});

		});
	</script>
</body>
</html>
